<template>
  <div class="delivery-container">
    <ul class="delivery-content" v-for="(item, index) in cartList" :key="item.id">
      <li>{{item.city}}</li>
      <li>
        <img :src="item.img" alt />
      </li>
      <li>
        <span class="to-btn" @click="addToCart(index)">+</span>
        <span class="to-btn">{{item.count}}</span>
        <span class="to-btn" @click="removeToCart(index)">-</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  props: {
    list: {
      type: Array,
    },
  },
  computed: {
    ...mapState("cart", ["cartList"]),
  },
  methods: {
    ...mapActions("cart", ["updateAddCart", "updateRemoveCart"]),
    addToCart(index) {
      this.updateAddCart(index);
    },
    removeToCart(index) {
      // 事件
      this.updateRemoveCart(index);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/_common.scss";
.to-btn {
  display: inline-block;
  padding: 5px 20px;
  // @include flex_center;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  margin: 5px;
  background: indianred;
}
</style>